<template>
  <div class="reports">
    <HeaderCom title="数据统计" titsub="数据报表">
      <div id="echarts" style="width:1000px;height:600px"></div>
    </HeaderCom>
  </div>
</template>

<script>
import HeaderCom from '../Header/HeaderCom'
import echarts from 'echarts'
import _ from 'loadsh'
export default {
  data() {
    return {
      options: {
        title: {
          text: '用户来源'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#E9EEF3'
            }
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            boundaryGap: false
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ]
      },
      own: [
        {
          owner: 'Colin',
          pets: [{ name: 'dog1' }, { name: 'dog2' }]
        },
        {
          owner: 'John',
          pets: [{ name: 'dog3' }, { name: 'dog4' }]
        }
      ],
      objA: { name: 'colin', car: 'suzuki', age: 17 },
      objB: { name: 'james', age: 17 }
    }
  },
  components: {
    HeaderCom
  },
  created() {},
  mounted() {
    this.getEachar()
    this.getSum()
  },
  methods: {
    async getEachar() {
      let reEcharts = echarts.init(document.getElementById('echarts'))
      const { data: res } = await this.$axios.get('reports/type/1')
      if (res.meta.status !== 200) return this.$message.error('获取数据失败')
      const result = _.merge(res.data, this.options)
      reEcharts.setOption(result)
    },
    getSum() {
      // _.times(5, function(i) {
      //   console.log(1)
      // })
      // const result = _.map(this.own, 'pets[0].name')
      // let b = _.cloneDeep(this.objA)
      // console.log(b)
      // b.age = 20
      // console.log(this.objA)
      console.log(_.omit(this.objA, _.isNumber))
    }
  }
}
</script>

<style lang='less' scoped>
</style>
